<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" href="../../build/aui-css/css/bootstrap.css">
    <script src="../../build/aui/aui.js"></script>
    <style>
        #closeButton .close {
            float: none;
        }
    </style>
</head>
<body>
    <h1>AlloyUI - Button</h1>
    <h2>JavaScript buttons</h2>
    <button id="basic"></button>
    <button id="toggle"></button>
    <span id="typed"></span>
    <span id="closeButton"></span>
    <h2>JavaScript button group</h2>
    <p>
        <div id="checkgroup">
            <input type="button" value="2">
            <input class="active" type="reset" value="3">
            <input class="active" type="submit" value="4">
            <input type="button" value="5">
            <input type="button" value="6">
            <button>7</button>
        </div>
    </p>
    <p>
        <div id="radiogroup">
            <input type="button" value="2">
            <input type="reset" value="3">
            <input class="active" type="submit" value="4">
            <input type="button" value="5">
            <input type="button" value="6">
            <button>7</button>
        </div>
    </p>
    <h2>CSS3 Buttons</h2>
    <p>
        <a class="btn btn-default" href="">Link</a>
        <button class="btn btn-default" type="submit">Button</button>
        <input class="btn btn-default" type="button" value="Input">
        <input class="btn btn-default" type="submit" value="Submit">
    </p>
    <p>
        <button class="btn btn-primary">Primary</button>
        <button class="btn btn-info">Info</button>
        <button class="btn btn-success">Success</button>
        <button class="btn btn-warning">Warning</button>
        <button class="btn btn-danger">Danger</button>
        <button class="btn btn-link">Link</button>
    </p>
    <h3>Sizes</h3>
    <p>
        <button class="btn btn-lg btn-primary" type="button">Large button</button>
        <button class="btn btn-lg btn-default" type="button">Large button</button>
    </p>
    <p>
        <button class="btn btn-primary" type="button">Default button</button>
        <button class="btn btn-default" type="button">Default button</button>
    </p>
    <p>
        <button class="btn btn-sm btn-primary" type="button">Small button</button>
        <button class="btn btn-sm btn-default" type="button">Small button</button>
    </p>
    <p>
        <button class="btn btn-xs btn-primary" type="button">Extra small button</button>
        <button class="btn btn-xs btn-default" type="button">Extra small button</button>
    </p>
    <p>
        <button class="btn btn-lg btn-block btn-primary" type="button">Block level button</button>
        <button class="btn btn-lg btn-block btn-default" type="button">Block level button</button>
    </p>
    <h3>States</h3>
    <p>
        <a href="#" class="btn btn-lg btn-primary active">Primary link active state</a>
        <a href="#" class="btn btn-lg active">Link active state</a>
    </p>
    <p>
        <a href="#" class="btn btn-lg btn-primary disabled">Primary link disabled state</a>
        <a href="#" class="btn btn-lg disabled">Link disabled state</a>
    </p>
    <h2>Button search cancel</h2>
    <p>
        <input class="clearable form-control" type="text">
        <br>
        <input class="clearable form-control" type="text" value="foo">
    </p>
    <h2>Switch button</h2>
    <p>
        <div id="switch"></div>
    </p>
    <script>
    YUI({ filter: 'raw' }).use('aui-button', 'aui-button-search-cancel', 'aui-button-switch', function(Y) {

        new Y.Button({
            cssClass: 'btn-primary',
            label: 'Basic',
            srcNode: '#basic',
            icon: 'glyphicon glyphicon-print',
            iconAlign: 'left'
        }).render();

        new Y.ToggleButton({
            cssClass: 'btn-info',
            label: 'Click to toggle',
            srcNode: '#toggle',
            icon: 'glyphicon glyphicon-print'
       }).render();

        new Y.Button({
            label: 'Type button',
            domType: 'button'
        }).render('#typed');

        new Y.Button({
            cssClass: 'close',
            label: '\u00D7',
            discardDefaultButtonCssClasses: true
        }).render('#closeButton');

        new Y.ButtonGroup({
            boundingBox: '#checkgroup',
            type: 'checkbox'
        }).render();

        new Y.ButtonGroup({
            boundingBox: '#radiogroup',
            type: 'radio'
        }).render();

        new Y.ButtonSearchCancel({
            trigger: '.clearable'
        });

        new Y.ButtonSwitch({
            srcNode: '#switch',
            innerLabelLeft: 'Light',
            innerLabelRight: 'Dark'
        }).render();
    });
    </script>
</body>
</html>